<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="模板名称" prop="temaplateName">
				<el-input v-model="queryParams.temaplateName" placeholder="请输入模板名称" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="模板描述" prop="temaplateDesc">
				<el-input v-model="queryParams.temaplateDesc" placeholder="请输入模板描述" clearable
					@keyup.enter.native="handleQuery" />
			</el-form-item>
		
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['lanjing:template:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
					v-hasPermi="['lanjing:template:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete" v-hasPermi="['lanjing:template:remove']">删除</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
					v-hasPermi="['lanjing:template:export']">导出</el-button>
			</el-col> -->
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table ref="table" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
			<!-- lazy :load="load" :tree-props="{children: 'children', hasChildren: 'temaplateBackup1'}" row-key="id"> -->
			<el-table-column type="selection" width="55" align="center" />
			<!-- <el-table-column label="唯一标识" align="center" prop="id" />
			<el-table-column label="父级标识" align="center" prop="parentId">
				<template slot-scope="scope">
					{{scope.row.parentId ==1?'顶级':scope.row.parentId}}
				</template>
			</el-table-column> -->
			<el-table-column label="模板标题" align="center" prop="temaplateName" />
			<el-table-column label="模板描述" align="center" prop="temaplateDesc" />
			<el-table-column label="模板类型" align="center" prop="temaplateType" />
			<el-table-column label="备注" align="center" prop="remark" />
			<!-- <el-table-column label="祖级列表" align="center" prop="ancestors" /> -->
			<!-- <el-table-column label="模板层级" align="center" prop="temaplateTop" /> -->
			<!-- <el-table-column label="模板的反馈" align="center" prop="temaplateFankui" /> -->
			<!-- <el-table-column label="模板的评分" align="center" prop="temaplatePingfen" /> -->
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<!-- <el-button size="mini" type="text" v-hasPermi="['lanjing:template:add']" icon="el-icon-plus"
						@click="addDpet(scope.row)">编辑</el-button>
					<el-divider direction="vertical" /> -->
					<el-button size="mini" type="text" v-hasPermi="['lanjing:template:edit']" icon="el-icon-plus"
						@click="setCentent(scope.row)">配置模板</el-button>
					<el-divider direction="vertical" />
					<el-dropdown @command="(e)=>handleCommand(e,scope.row)">
						<el-button size="mini" type="text">
							更多 <i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="edit"
								v-hasPermi="['lanjing:template:edit']">修改</el-dropdown-item>
							<el-dropdown-item command="remove"
								v-hasPermi="['lanjing:template:remove']">删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

				</template>
			</el-table-column>
			<!-- <el-table-column label="${comment}" align="center" prop="temaplateBackup1" />
			<el-table-column label="${comment}" align="center" prop="temaplateBackup2" />
			<el-table-column label="${comment}" align="center" prop="temaplateBackup3" />
			<el-table-column label="${comment}" align="center" prop="temaplateBackup4" /> -->
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<mylog ref="mylog" @ok="updataParentId" @close="cancel">
			<template #center>
				<el-form slot="center" ref="form" :model="form" :rules="rules" label-width="80px">
					<el-form-item label="模板名称" prop="temaplateName">
						<el-input v-model="form.temaplateName" placeholder="请输入模板名称" />
					</el-form-item>
					<el-form-item label="模板类型" prop="temaplateType">
						<el-select v-model="form.temaplateType" placeholder="请选择模板类型" style="width: 100%;">
							<el-option v-for="item in dict.type.model_type" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模板描述" prop="temaplateDesc">
						<el-input v-model="form.temaplateDesc" placeholder="请输入模板描述" />
					</el-form-item>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
					</el-form-item>
					<!-- <el-form-item label="父级标识" prop="parentId">
						<el-input v-model="form.parentId" disabled />
					</el-form-item>
					<el-form-item label="是否有下级" prop="temaplateBackup1">
						<el-input v-model="form.temaplateBackup1" disabled />
					</el-form-item>
					<el-form-item label="模板层级" prop="temaplateTop">
						<el-input v-model="form.temaplateTop" disabled />
					</el-form-item> -->
					<!-- <el-form-item label="模板的反馈" prop="temaplateFankui">
						<el-input v-model="form.temaplateFankui" type="textarea" placeholder="请输入内容" />
					</el-form-item> -->
					<!-- <el-form-item label="模板的评分" prop="temaplatePingfen">
						<el-input v-model="form.temaplatePingfen" type="textarea" placeholder="请输入内容" />
					</el-form-item> -->
				</el-form>
			</template>
		</mylog>
		<myDrawer ref="myDrawer" :headerBtnShow="false">
			<template #center>
				<modelForm ref="modelForm"></modelForm>
			</template>
		</myDrawer>
	</div>
</template>

<script>
	import {
		getAction,
		postAction,
		editAction,
		removeAction,
		detailAction,
	} from "@/api/api";
	import mylog from '@/views/components/mylog.vue'
	import myDrawer from '@/views/components/myDrawer.vue'
	import task from '@/views/lanjing/task/index.vue'
	import modelForm from '@/views/lanjing/template/modelForm.vue'
	import {
		mixin
	} from '@/mixins/mixins';
	export default {
		dicts: ['model_type'],
		mixins: [mixin],
		components: {
			mylog,
			myDrawer,
			task,
			modelForm
		},
		name: "Template",
		data() {
			return {
				// 显示搜索条件
				showSearch: true,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					temaplateName: null,
					temaplateDesc: null,
					temaplateType: null,
					temaplateBackup1: null,
					temaplateBackup2: null,
					temaplateBackup3: null,
					temaplateBackup4: null,
					parentId:null,
					ancestors: null,
					// temaplateTop: 1,
					temaplateFankui: null,
					temaplatePingfen: null,
					parentIds: [],
					idd: null
				},
				// 表单校验
				rules: {},
				//自动调用GetList
				autoGetList: false,
				//接口名称
				apiUrl: '/lanjing/template',
				rowForm: null
			};
		},
		created() {
			this.pageNum = '任务模板'
			this.getList(null, this.listMap)
		},
		methods: {
			listMap(e) {
				e = e.map(v => {
					let obj = {
						...v
					}
					if (obj.temaplateBackup1) {
						obj.temaplateBackup1 = true
					}
					return obj
				})
				return e
			},

			// 表单重置
			reset() {
				this.form = {
					id: null,
					temaplateName: null,
					temaplateDesc: null,
					temaplateType: null,
					temaplateBackup1: null,
					temaplateBackup2: null,
					temaplateBackup3: null,
					temaplateBackup4: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					parentId:0,
					ancestors: null,
					temaplateTop: 1,
					temaplateFankui: null,
					temaplatePingfen: null
				};
				this.resetForm("form");
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			load(tree, treeNode, resolve) {
				console.log(tree, treeNode)
				getAction(`${this.apiUrl}/list`, {
					parentId: tree.id,
					pageNum: 1,
					pageSize: 999,
				}).then(res => {
					resolve(res.rows);
				})
			},
			addDpet(row) {
				// this.rowForm = row
				this.reset();
				//idd 父级Id
				if (row.parentId === 0) {
					let obj = null
					if(row.temaplateBackup2){
						obj = JSON.parse(row.temaplateBackup2)
					}
					//判断第一级自增id
					this.form.iid = !obj?1:obj.length
					//传入模板id
					this.form.parentIds = [row.id]
					// this.form.parentIds  = [row.idd]
				} else {




				}








				// if (row.parentIds) {
				// 	let arr = []
				// 	if (row.parentIds.indexOf(',') != -1) {
				// 		arr = row.parentIds.split(',')
				// 	} else {
				// 		arr = [row.parentIds]
				// 	}
				// 	if (row.children) {
				// 		arr.push(row.children[row.children.length - 1].)
				// 	} else {

				// 	}
				// 	this.form.parentIds =

				// }
				// this.form.temaplateTop = Number(row.temaplateTop) + 1
				this.handleAdd(false)
			},
			updataParentId() {
				if (this.form.parentId != 0) {
					editAction(`${this.apiUrl}`, {
						id: this.form.parentId,
						temaplateBackup1: true
					}).then(response => {
						this.$set(this.rowForm, 'temaplateBackup1', true)
						this.submitForm()
					});
				} else {
					this.submitForm()
				}
			},
			setCentent(row) {
				this.$refs.myDrawer.open = true;
				this.$refs.myDrawer.title = `【${row.temaplateName}】` +'新增模板配置';
				this.$nextTick(()=>{
					this.$refs.modelForm.setRowInfo(row)
				})
			},
		}
	};
</script>